// 创建独立的编辑控制器文件：editableNodeController.js
import "./styles/editmode.scss"
import { renderContent, str2html } from './bizUtIl'

class EditableNodeController {
    // 静态属性，跟踪当前正在编辑的节点控制器
    static currentEditingNode = null

    constructor(graph, cell, container, contentDiv) {
        // 注入全局画布实例，用于监听画布点击事件
        this.graph = graph
        this.cell = cell
        this.container = container
        this.contentDiv = contentDiv
        this.isEditing = false
        this.editor = null
        this.globalClickHandler = null
        this.escKeyHandler = null

    }

    // 绑定双击事件
    bindEvents() {
        // 创建新的事件处理器
        // this.dblClickHandler = (e) => {
        //     // e.preventDefault()
        //     // e.stopPropagation()
        //     this.enterEditMode()
        // }

        // 绑定新的事件监听器
        // this.container.removeEventListener('dblclick', this.dblClickHandler)
        // // 绑定新的事件监听器
        // this.container.addEventListener('dblclick', this.dblClickHandler)
    }

    // 进入编辑模式
    enterEditMode() {
        // 设置当前编辑节点
        EditableNodeController.currentEditingNode = this

        this.isEditing = true

        // 创建编辑器
        this.createEditor()

        // 隐藏内容显示
        this.contentDiv.style.display = 'none'

        // 显示编辑器
        this.container.appendChild(this.editor)


        // 设置焦点并滚动到顶部
        this.editor.focus()
        this.editor.scrollTop = 0

        // 绑定全局事件
        this.bindGlobalEvents()

        // 添加编辑状态样式
        this.container.classList.add('editing')
    }

    // 退出编辑模式
    exitEditMode(save = true) {
     

        this.isEditing = false

        // 清除全局编辑状态
        if (EditableNodeController.currentEditingNode === this) {
            EditableNodeController.currentEditingNode = null
        }

        // 保存内容
        if (save && this.editor) {
            this.saveContent()
        }

        // 移除编辑器
        // if (this.editor && this.editor.parentNode) {
        //     this.editor.parentNode.removeChild(this.editor)
        // }
        // this.editor = null

        // 显示内容
        this.contentDiv.style.display = 'block'

        // // 移除全局事件监听
        // this.unbindGlobalEvents()

        // // 移除编辑状态样式
        this.container.classList.remove('editing')

        //重新设置 event 
        this.bindEvents()
    }

    // 创建编辑器
    createEditor() {
        const editor = document.createElement('textarea')
        editor.className = 'markdown-node-editor'
        editor.value = this.cell.getData().content || ''

        // 设置编辑器样式
        Object.assign(editor.style, {
            width: '100%',
            height: '100%',
            border: 'none',
            padding: '8px',
            fontSize: '14px',
            fontFamily: 'inherit',
            lineHeight: '1.5',
            resize: 'none',
            outline: 'none',
            backgroundColor: 'transparent',
            boxSizing: 'border-box',
            minHeight: '40px'
        })



        // 阻止编辑器的事件冒泡
        editor.addEventListener('mousedown', (e) => {
            e.stopPropagation()
        })

        editor.addEventListener('click', (e) => {
            e.stopPropagation()
        })

        // 键盘事件处理
        editor.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                e.preventDefault()
                this.exitEditMode(false) // 不保存直接退出
            } else if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
                e.preventDefault()
                this.exitEditMode(true) // 保存并退出
            }
        })

        this.editor = editor
        return editor
    }



    // 绑定全局事件
    bindGlobalEvents() {
        // // 监听画布空白区域点击
        // this.globalClickHandler = (e) => {
        //     if (this.isEditing && !this.container.contains(e.target)) {
        //         this.exitEditMode(true) // 保存并退出编辑
        //         // 退出编辑模式时，重新测量并更新节点尺寸
        //         this.updateNodeSize()
        //     }
        // }

        // // 绑定到画布容器的点击事件
        // this.graph.container.addEventListener('click', this.globalClickHandler)

        // ESC键退出编辑
        this.escKeyHandler = (e) => {
            if (e.key === 'Escape' && this.isEditing) {
                this.exitEditMode(false) // 不保存直接退出
            }
            if (e.key === 'Enter' && e.ctrlKey && this.isEditing) {
                this.exitEditMode(true) // Ctrl+Enter保存并退出
            }
        }

        document.addEventListener('keydown', this.escKeyHandler)
    }

    // 解绑全局事件
    unbindGlobalEvents() {
        if (this.globalClickHandler) {
            this.graph.container.removeEventListener('click', this.globalClickHandler)
            this.globalClickHandler = null
        }

        if (this.escKeyHandler) {
            document.removeEventListener('keydown', this.escKeyHandler)
            this.escKeyHandler = null
        }
    }

    // 保存内容
    saveContent() {
        const newContent = this.editor.value
        const currentData = this.cell.getData() || {}

        // 更新节点数据
        this.cell.setData({
            ...currentData,
            content: newContent
        })

        // 重新渲染内容
        // renderContent(this.contentDiv, newContent, false)
        this.contentDiv.innerHtml = str2html(newContent)



        // 触发内容更新事件
        this.graph?._onContentChange?.({ cell: this.cell, content: newContent })

    }

    // 更新节点尺寸方法
    updateNodeSize() {
        // 延迟执行以确保DOM更新完成
        setTimeout(() => {
            const rect = this.contentDiv.getBoundingClientRect()
            const currentSize = this.cell.getSize()

            // 如果内容尺寸发生变化，更新节点尺寸
            if (rect.height !== currentSize.height || rect.width !== currentSize.width) {
                this.cell.resize(rect.width, rect.height)

                // 如果存在resize控制器，更新拖拽点位置
                if (this.cell._customResizeController) {
                    this.cell._customResizeController.updateSVGHandles()
                }
            }
        }, 50)
    }

    // 销毁控制器
    destroy() {
        this.exitEditMode(false)
        this.unbindGlobalEvents()


        // 清理引用
        this.graph = null
        this.cell = null
        this.container = null
        this.contentDiv = null
    }
}

export default EditableNodeController

